<template>
  <div >
    <!-- 搜索和功能区 -->
    <el-row class="margin-bottom margin-top">
      <el-col :span="18">
        <el-input :disabled="!connName" size="small"  v-model="search.keyword" placeholder="输入表名/字段名/表注释/列注释/table:表名/column:列名/tag:表标记" suffix-icon="el-icon-search" @keyup.enter.native="searchTables" @keyup.native="keyupSearch" >
          <el-select style="width: 100px" v-model="search.searchSchema" slot="prepend" placeholder="请选择">
            <el-option label="全局" value=""/>
            <el-option label="table" value="table"/>
            <el-option label="column" value="column"/>
            <el-option label="tag" value="tag"/>
          </el-select>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button-group class="margin-left">
          <el-button size="small" type="primary" :disabled="!connName" @click="generateDoc">下载文档</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!-- 数据表展示区 -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="searchTable"
          v-loading="loading"
          :data="tables"
          border
          stripe
          height="500"
          :row-key="row => ('table:'+row.table.actualTableName.tableName + (Math.random() * 1000))"
          size="mini"
          highlight-current-row
          @row-click="clickTableRow"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <template v-if="selection">
            <el-table-column
              type="selection"
              width="55"
            />
          </template>

<!--          <el-table-column-->
<!--            label="列数"-->
<!--            width="50"-->
<!--          >-->
<!--            <template slot-scope="{row}">{{row.columns.length}}</template>-->
<!--          </el-table-column>-->
          <el-table-column
            prop="table.actualTableName.tableName"
            label="表名称"
            width="260"
          />
          <template v-if="showRemark">
            <el-table-column
              prop="table.remark"
              label="表说明"
            />

          </template>

        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import database from '@/api/database'
import core from '@/api/core'

export default {
  name: 'TableSearch',
  props: {
    connName: String,
    namespace: Object,
    selection: {
      type: Boolean,
      default: false
    },
    showRemark: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return {
      search: {
        searchSchema: null,
        keyword: null
      },
      tables: [],
      loading: false
    }
  },
  methods: {
    keyupSearch() {
      if (this.keyword && this.keyword.length > 10) {
        this.searchTables()
      }
    },
    searchTables() {
      if (this.keyword) {
        this.keyword = this.keyword.trim()
      }

      this.loading = true;
      database.searchTables(this.connName, this.namespace.catalog, [this.namespace.schema],this.search.searchSchema, this.search.keyword).then(res => {
        this.tables = res.data
        this.loading = false;

        // 加载完成后, 如果有数据表, 默认会触发首行点击事件
        this.clickFirstRowIfExist()
      }).catch(res => {
        this.loading = false;
      })
    },
    generateDoc(){
      database.exportDoc(this.connName, this.namespace.catalog, [this.namespace.schema],this.search.searchSchema, this.search.keyword).then(res => {
        core.fileDownload(res.data)
      })
    },

    /**
     * 获取选中行
     */
    getChoseTables(){
      return this.$refs.searchTable.selection;
    },
    clickTableRow(row, column, event){
      this.$emit('click-row',row,column);
    },
    clickFirstRowIfExist(){
      if (this.tables && this.tables.length > 0){
        // this.$nextTick(() => {
        //   this.$refs.searchTable.
        // })
        this.$emit('click-row',this.tables[0],this.tables[0][0]);
      }
    }
  }
}
</script>


